<template>
  <div class="login-box" :class="className">
    <div class="box-left">
      <div class="box-icon"></div>
      <div class="box-title">
        <!-- <h3>海南省网信大数据反走私监测预警平台 </h3> -->
        <h3> {{ projectTitle }} </h3>
        <h4>Monitoring and Early Warning Platform</h4>
      </div>
    </div>
    <div class="box-right">
      <a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
        <div class="login-title2" v-if="className">
          <div class="box-icon"></div>
          <span>{{ projectTitle }}</span>
        </div>
        <div class="form-model-layout">
          <div class="login-title3" v-if="className">
            <span> 系统登录 </span>
          </div>
          <div class="login-title1" v-else>
            <span> 欢迎登录 </span>
          </div>
          <!-- <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"  @change="handleTabClick">
              <a-tab-pane key="tab1" tab="账号密码登录"> -->
          <login-account class="form-model-box" ref="alogin" @validateFail="validateFail" @success="requestSuccess"
            @setCertShow="onSetCertShow" @fail="requestFailed"></login-account>
          <!-- </a-tab-pane>

              <a-tab-pane key="tab2" tab="手机号登录">
                <login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>
              </a-tab-pane>
            </a-tabs> -->

          <a-form-model-item class="autoLogin">
            <a-checkbox @change="handleRememberMeChange" default-checked>自动登录</a-checkbox>
            <!-- <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
                忘记密码
              </router-link>
              <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
                注册账户
              </router-link> -->
          </a-form-model-item>

          <a-form-item class="login-button-item">
            <a-button size="large" type="primary" shape="round" htmlType="submit" block class="login-button"
              :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn">登录<a-icon
                type="arrow-right" />
            </a-button>
          </a-form-item>
          <div :class="className" v-if="isCertShow">
            <a-icon type="download" style="color:#1890FF;"/>
            <a-button @click="onCertDownLoap()" type="link" style="padding: 0;margin-left:10px;">USBKEY控件下载</a-button>
          </div>
        </div>
      </a-form-model>
    </div>

    <two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess"
      @cancel="stepCaptchaCancel"></two-step-captcha>
    <login-select-tenant ref="loginSelect" @success="loginSelectOk" @fail="requestFailed"></login-select-tenant>
    <!-- <third-login ref="thirdLogin"></third-login> -->
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN, ENCRYPTED_STRING } from '@/store/mutation-types'
import ThirdLogin from './third/ThirdLogin'
import LoginSelectTenant from './LoginSelectTenant'
import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
import { getEncryptedString } from '@/utils/encryption/aesEncrypt'
import { timeFix } from '@/utils/util'

import LoginAccount from './LoginAccount'
import LoginPhone from './LoginPhone'

export default {
  components: {
    LoginSelectTenant,
    TwoStepCaptcha,
    ThirdLogin,
    LoginAccount,
    LoginPhone
  },
  data() {
    return {
      projectTitle: process.env.VUE_APP_PLATFORM_NAME,
      systemFlag: process.env.VUE_APP_PLATFORM_KEY, //系统标识
      customActiveKey: 'tab1',
      rememberMe: true,
      loginBtn: false,
      requiredTwoStepCaptcha: false,
      stepCaptchaVisible: false,
      encryptedString: {
        key: "",
        iv: "",
      },
      isCertShow: true
    }
  },
  computed: {
    className() {
      // 系统标识等于zdr，则切换成海南省网信大数据重点人监测预警平台样式
      if (this.systemFlag === 'zdr') {
        return 'init-login-box'
      } else {
        return ''
      }
    }
  },
  created() {
    Vue.ls.remove(ACCESS_TOKEN)
    this.getRouterData();
    this.rememberMe = true
  },
  methods: {
    handleTabClick(key) {
      this.customActiveKey = key
    },
    handleRememberMeChange(e) {
      this.rememberMe = e.target.checked
    },
    /**跳转到登录页面的参数-账号获取*/
    getRouterData() {
      this.$nextTick(() => {
        let temp = this.$route.params.username || this.$route.query.username || ''
        if (temp) {
          this.$refs.alogin.acceptUsername(temp)
        }
      })
    },

    //登录
    handleSubmit() {
      this.loginBtn = true;
      if (this.customActiveKey === 'tab1') {
        // 使用账户密码登录
        this.$refs.alogin.handleLogin(this.rememberMe)
      } else {
        //手机号码登录
        this.$refs.plogin.handleLogin(this.rememberMe)
      }
    },
    // 校验失败
    validateFail() {
      this.loginBtn = false;
    },
    // 登录后台成功
    requestSuccess(loginResult) {
      this.$refs.loginSelect.show(loginResult)
    },
    //登录后台失败
    requestFailed(err) {
      let description = ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试"
      this.$refs.alogin.handleUserPassword(description)
      // this.$notification[ 'error' ]({
      //   message: '登录失败',
      //   description: description,
      //   duration: 4,
      // });
      //账户密码登录错误后更新验证码
      if (this.customActiveKey === 'tab1' && description.indexOf('密码错误') > 0) {
        this.$refs.alogin.handleChangeCheckCode()
        this.$refs.alogin.handleUserPassword(description)
      }
      this.loginBtn = false;
    },
    loginSelectOk(bool) {
      this.loginSuccess(bool)
    },
    //登录成功
    loginSuccess() {
      this.$router.push({ path: "/dashboard/analysis" }).catch(() => {
        console.log('登录跳转首页出错,这个错误从哪里来的')
      })
      this.$notification.success({
        message: '欢迎',
        description: `${timeFix()}，欢迎回来`,
      });
    },

    stepCaptchaSuccess() {
      this.loginSuccess()
    },
    stepCaptchaCancel() {
      this.Logout().then(() => {
        this.loginBtn = false
        this.stepCaptchaVisible = false
      })
    },
    //获取密码加密规则
    getEncrypte() {
      var encryptedString = Vue.ls.get(ENCRYPTED_STRING);
      if (encryptedString == null) {
        getEncryptedString().then((data) => {
          this.encryptedString = data
        });
      } else {
        this.encryptedString = encryptedString;
      }
    },
    onCertDownLoap() {
      let dom = document.createElement("a");
      dom.href = "/file/GM3000_mPlugin_Setup(202111打包证书客户端).exe";
      dom.download = "GM3000_mPlugin_Setup(202111打包证书客户端).exe";
      document.body.appendChild(dom);
      // 点击下载
      dom.click();
      document.body.removeChild(dom);
    },
    onSetCertShow(val) {
      this.isCertShow = val
    }
  }

}
</script>
<style lang="less" scoped>
@import '~@/assets/less/login.less';

.init-login-box {
  .ant-btn {
    color: #fff;
  }

  .anticon-download {
    color: #fff!important;
  }
}
</style>
<style>
.valid-error .ant-select-selection__placeholder {
  color: #f5222d;
}
</style>